<template>
	<el-card>
		<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList()">
			<el-form-item>
				<el-input v-model="state.queryForm.patientName" placeholder="请输入患者姓名" clearable></el-input>
			</el-form-item>
			<el-form-item>
				<el-button @click="getDataList()">查询</el-button>
			</el-form-item>
		</el-form>
		<el-table v-loading="state.dataListLoading" :data="state.dataList" border style="width: 100%" @selection-change="selectionChangeHandle">
			<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
			<el-table-column prop="userName" label="患者姓名" header-align="center" align="center"></el-table-column>
			<el-table-column prop="userSex" label="性别" header-align="center" align="center"></el-table-column>
			<el-table-column prop="userAge" label="年龄" header-align="center" align="center"></el-table-column>
			<el-table-column prop="userCard" label="身份证号" header-align="center" align="center"></el-table-column>
			<el-table-column prop="viewState" label="就诊状态" header-align="center" align="center"></el-table-column>
			<el-table-column prop="startCase" label="初步诊断" header-align="center" align="center"></el-table-column>
			<el-table-column prop="patientMoney" label="结算金额" header-align="center" align="center"></el-table-column>
			<el-table-column prop="registerDept" label="挂号科室" header-align="center" align="center"></el-table-column>
			<el-table-column prop="seeDoctor" label="挂号医生" header-align="center" align="center"></el-table-column>
			<el-table-column label="操作" fixed="right" header-align="center" align="center" width="150">
				<template #default="scope">
					<el-button type="primary" link @click="ViewMoney(scope.row)">查看</el-button>
					<el-button type="primary" link @click="BatchHandleView(scope.row)">结算</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			:current-page="state.page"
			:page-sizes="state.pageSizes"
			:page-size="state.limit"
			:total="state.total"
			layout="total, sizes, prev, pager, next, jumper"
			@size-change="sizeChangeHandle"
			@current-change="currentChangeHandle"
		>
		</el-pagination>
		<!-- 弹窗, 新增 / 修改 -->
		<patientuser ref="listUserRef" @refresh-data-list="getDataList"></patientuser>
	</el-card>
	<el-dialog v-model="visible" :title="''" :close-on-click-modal="false" draggable>
		<div style="width: 100%" align="center">
			<div id="printTest" style="width: 100%" align="center">
				<h1 style="margin-top: 10px; margin-bottom: 10px">医疗费用清单</h1>
				<table class="tb" style="width: 100%; border: 1px solid #000000; border-collapse: collapse">
						<tbody>
							<tr>
								<td style="text-align: center; border: 1px solid #000000; border-collapse: collapse">序号</td>
								<td style="text-align: center; border: 1px solid #000000; border-collapse: collapse">药品名称</td>
								<td style="text-align: center; border: 1px solid #000000; border-collapse: collapse">药品规格</td>
								<td style="text-align: center; border: 1px solid #000000; border-collapse: collapse">数量</td>
								<td style="text-align: center; border: 1px solid #000000; border-collapse: collapse">销售价格</td>
							</tr>
							<tr v-for="(printItem, index) in state.queryForm.detailList" :key="index">
								<td style="text-align: center; border: 1px solid #000000; border-collapse: collapse">{{ index + 1 }}</td>
								<td style="text-align: center; border: 1px solid #000000; border-collapse: collapse">{{ printItem.goodName }}</td>
								<td style="text-align: center; border: 1px solid #000000; border-collapse: collapse">{{ printItem.goodSpec }}</td>
								<td style="text-align: center; border: 1px solid #000000; border-collapse: collapse">{{ printItem.goodCount }}</td>
								<td style="text-align: center; border: 1px solid #000000; border-collapse: collapse">{{ printItem.salePrice }}</td>
							</tr>
						</tbody>
				</table>
				<table class="tb" style="width: 100%;margin-top: 20px; border: 1px solid #000000; border-collapse: collapse">
						<tbody>
							<tr>
								<td style="text-align: center; border: 1px solid #000000; border-collapse: collapse">序号</td>
								<td style="text-align: center; border: 1px solid #000000; border-collapse: collapse">项目名称</td>
								<td style="text-align: center; border: 1px solid #000000; border-collapse: collapse">数量</td>
								<td style="text-align: center; border: 1px solid #000000; border-collapse: collapse">项目价格</td>
							</tr>
							<tr v-for="(printItem, index) in state.queryForm.projectList" :key="index">
								<td style="text-align: center; border: 1px solid #000000; border-collapse: collapse">{{ index + 1 }}</td>
								<td style="text-align: center; border: 1px solid #000000; border-collapse: collapse">{{ printItem.projectName }}</td>
								<td style="text-align: center; border: 1px solid #000000; border-collapse: collapse">1</td>
								<td style="text-align: center; border: 1px solid #000000; border-collapse: collapse">{{ printItem.projectPrice }}</td>
							</tr>
						</tbody>
				</table>
				<h1 style="margin-top: 10px; margin-bottom: 10px;color: red;text-align: left;">挂号费：{{ state.queryForm.costMoney }}元</h1>
			</div>
			<div style="margin-top: 10px">
				<el-button type="primary" class="btnbutton" @click="handlePrintJs">打印</el-button>
			</div>
		</div>
	</el-dialog>
</template>

<script setup lang="ts" name="SysPostIndex">
import { useCrud } from '@/hooks'
import { reactive, ref } from 'vue'
import { IHooksOptions } from '@/hooks/interface'
import patientuser from '../account/add-or-update.vue'
import printJs from 'print-js'
import {usePatientDrugselListApi} from '@/api/sys/patientdrug'
import {usePatientProjectsellistApi} from '@/api/sys/patientproject'
import {usePatientsellistApi} from '@/api/sys/patient'

const visible = ref(false)
const state: IHooksOptions = reactive({
	dataListUrl: '/sys/patientmoney/page',
	deleteUrl: '/sys/patientmoney',
	queryForm: {
		patientName: '',
		orgId:localStorage.getItem('org'),
		isSettle:0,
		detailList:[],
		projectList:[],
		costMoney:0
	}
})

const listUserRef = ref()
const BatchHandleView=(row:any)=>{
	listUserRef.value.init(row);
}
const ViewMoney = (row: any) => {
	let param = { patientId: row.patientId, page: 1, limit: 1 }
	usePatientDrugselListApi(param).then(res => {
		state.queryForm.detailList = res.data
		visible.value = true
	})
	usePatientProjectsellistApi(param).then(res => {
		state.queryForm.projectList = res.data
		visible.value = true
	})
	let selparam = { uid: row.patientId, page: 1, limit: 1 }
	usePatientsellistApi(selparam).then(res => {
		state.queryForm.costMoney = res.data[0].costMoney;
		visible.value = true
	})
}
const handlePrintJs = () => {
	printJs({
		printable: 'printTest',
		type: 'html',
		targetStyle: ['*'],
		scanStyles: false
	})
}
const { getDataList, selectionChangeHandle, sizeChangeHandle, currentChangeHandle, deleteBatchHandle } = useCrud(state)
</script>
